<template>
	<view>
		<view class="sort" v-for="(item,index) in dataList" :key="index">
			<view class="sort-title">{{item.title}}</view>
			<view class="sort-list">
				<text class="sort-list-item" v-for="(item2,index2) in item.list" :key="index2" @click="toSortListPage">
					{{item2}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {sortList} from '@/apis/index.js'
	export default {
		data() {
			return {
				dataList: [{
						title: '资讯',
						list: ['活动庆典', '发布会', '展会巡展', '展会巡展', '展会巡展']
					},
					{
						title: '资讯',
						list: ['活动庆典', '发布会', '展会巡展', '展会巡展', '展会巡展']
					},
					{
						title: '资讯',
						list: ['活动庆典', '发布会', '展会巡展', '展会巡展', '展会巡展']
					},
					{
						title: '资讯',
						list: ['活动庆典', '发布会', '展会巡展', '展会巡展', '展会巡展']
					}
				]
			}
		},
		methods:{
			getList(){
				sortList().then(res => {
					let [err, data] = res;
					console.log("sortList",data.data.data)
					this.dataList= data.data.data
				})
			},
			toSortListPage(){
				uni.navigateTo({
					url:'/pages/sort/sortList'
				})
			}
		},mounted() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.sort {
		margin: 0 auto;
		width: 95%;
		display: flex;
		flex-direction: column;

		.sort-title {
			width: 100%;
			color: #000000;
			font-weight: bold;
			font-size: 20px;
			margin-left: 10rpx;
			margin-bottom: 20rpx;
		}

		.sort-list {
			color: #333333;

			.sort-list-item {
				width: 30%;
				height: 80rpx;
				float: left;
				margin-left: 10rpx;
				margin-bottom: 15rpx;
				background: #F6F6F6;
				border-radius: 10rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 26rpx;
			}
		}
	}
</style>
